@keyframes toast-enter-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-leave-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes toast-leave-down {
  from {
    opacity: 1;
    transform: translateY(var(--radix-toast-swipe-end-y));
  }

  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

.toast-viewport {
  --toast-spacing: var(--spacing-tight);

  position: fixed;
  display: flex;
  justify-content: center;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  bottom: 24px;
  pointer-events: none;

  & ol {
    list-style: none;
    margin: 0;
    padding: 0;

    & li+li {
      margin-top: var(--toast-spacing);
    }
  }

  & ol:empty {
    display: none;
  }

  & li {
    @media (prefers-reduced-motion: no-preference) {
      will-change: opacity, transform;

      &[data-state="open"] {
        animation: toast-enter-up 100ms ease-out forwards;
      }

      &[data-state="closed"] {
        animation: toast-leave-fade 100ms ease-out forwards;
      }

      &[data-swipe="move"] {
        transform: translateY(var(--radix-toast-swipe-move-y));
      }

      &[data-swipe="cancel"] {
        transform: translateY(0);
      }

      &[data-swipe="end"] {
        animation: toast-leave-down 100ms ease-out forwards;
      }
    }
  }
}

.toast {
  --text-color: var(--color-neutral-inverted-content);
  --background-color: var(--color-neutral-inverted-surface);
  --border-color: var(--color-surface-border);
  --hover-color: var(--color-neutral-inverted-surface-hover);
  --padding: var(--toast-spacing);

  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 4px;
  overflow: hidden;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  background-color: var(--background-color);
  pointer-events: all;

  & > div,
  &__content {
    font-size: 14px;
    line-height: 24px;
    flex: 1;
  }

  &__action,
  &__content {
    padding: var(--padding);
    color: var(--text-color);
  }

  &__action {
    flex: 0;
    min-width: min-content;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    border: none;
    border-radius: 0;
    border-left: 1px solid var(--border-color);
    white-space: nowrap;
    background: none;
    align-self: stretch;
    display: flex;
    align-items: center;

    &:hover {
      color: var(--color-negative-border);
    }
  }

  &__close {
    width: 24px;
    min-width: 40px;
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 0;

    &:hover {
      background-color: var(--hover-color);
    }
  }

  &_info {
    // Always maintain a dark background for info toasts
    --text-color: var(--color-sand-100);
    --background-color: var(--color-sand-900);
    --border-color: var(--color-sand-700);
    --hover-color: var(--color-sand-800);
  }

  &_error {
    --text-color: var(--color-negative-surface-content);
    --background-color: var(--color-negative-surface);
    --border-color: var(--color-negative-border);
    --hover-color: var(--color-negative-surface-hover);
  }

  &_alertError {
    --text-color: var(--color-neutral-content);
    --background-color: var(--color-neutral-surface);
    --border-color: var(--color-neutral-border);
    --hover-color: var(--color-neutral-inverted-surface-hover);

    border-bottom: 5px solid var(--color-negative-border);
    border-radius: 4px;
    text-align: center;

    &__action {
      display: flex;
      align-items: center;
      align-self: stretch;
    }

    &__content {
      display: block;
    }

  }

}

.messageToast {
  border-radius: 4px;

  &_alertError {
    position: fixed;
    top: 60px;
    left: calc(50vw - 250px);
    width: calc(100vw - 60px);
    max-width: 500px;
    transform: translateY(-200%);
    transition: transform 1s;
    z-index: 100;
  }
}
